// 导入React的useState钩子，用于管理组件状态
import { useState } from 'react';
// 导入Redux store的自定义hooks，用于获取状态和发送action
import { useAppSelector, useAppDispatch } from '../store/hooks';
// 导入Redux doctorSlice中的关注和取消关注actions
import { addFollowedDoctor, removeFollowedDoctor } from '../store/doctorSlice';

// 定义关注功能测试页面组件
export default function TestFollowPage() {
  // 获取Redux dispatch函数，用于发送action
  const dispatch = useAppDispatch();
  // 从Redux store获取关注的医生列表和医生数据
  const { followedDoctors, followedDoctorsData } = useAppSelector(state => state.doctor);
  // 定义测试医生ID状态
  const [testDoctorId, setTestDoctorId] = useState('test_doctor_001');

  // 处理添加关注事件
  const handleAddFollow = () => {
    // 创建测试医生数据
    const testDoctor = {
      id: testDoctorId, // 医生ID
      name: '测试医生', // 医生姓名
      title: '主任医师', // 医生职称
      hospital: '测试医院', // 所属医院
      department: '测试科室', // 科室
      avatar: '测', // 头像
      isOnline: true, // 在线状态
      consultationMethods: ['图文咨询'], // 咨询方式
      specialties: '测试专业', // 专业特长
      rating: 95, // 评分
      commendations: 10, // 推荐数
      views: 5000, // 浏览量
      price: 50, // 价格
      isGradeA: true // 是否为A级医生
    };
    // 发送添加关注医生的action
    dispatch(addFollowedDoctor(testDoctor));
  };

  // 处理取消关注事件
  const handleRemoveFollow = () => {
    // 发送取消关注医生的action
    dispatch(removeFollowedDoctor(testDoctorId));
  };

  // 返回JSX结构
  return (
    // 主容器，设置内边距
    <div className="p-4">
      {/* 页面标题 */}
      <h1 className="text-xl font-bold mb-4">关注功能测试</h1>
      
      {/* 测试医生ID输入区域 */}
      <div className="mb-4">
        {/* 输入框标签 */}
        <label className="block text-sm font-medium mb-2">测试医生ID:</label>
        {/* 医生ID输入框 */}
        <input
          type="text"
          value={testDoctorId}
          onChange={(e) => setTestDoctorId(e.target.value)} // 更新测试医生ID
          className="w-full p-2 border border-gray-300 rounded"
        />
      </div>

      {/* 操作按钮区域 */}
      <div className="mb-4">
        {/* 添加关注按钮 */}
        <button
          onClick={handleAddFollow}
          className="mr-2 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
        >
          添加关注
        </button>
        {/* 取消关注按钮 */}
        <button
          onClick={handleRemoveFollow}
          className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
        >
          取消关注
        </button>
      </div>

      {/* 当前关注状态显示区域 */}
      <div className="mb-4">
        {/* 状态标题 */}
        <h2 className="text-lg font-semibold mb-2">当前关注状态:</h2>
        {/* 状态信息容器 */}
        <div className="p-3 bg-gray-100 rounded">
          {/* 已关注医生数量 */}
          <p>已关注医生数量: {followedDoctors.length}</p>
          {/* 已关注医生ID列表 */}
          <p>已关注医生ID: {followedDoctors.length > 0 ? followedDoctors.join(', ') : '无'}</p>
          {/* 已关注医生数据数量 */}
          <p>已关注医生数据: {followedDoctorsData.length} 位</p>
          {/* 当前测试医生是否已关注 */}
          <p>当前测试医生是否已关注: {followedDoctors.includes(testDoctorId) ? '是' : '否'}</p>
        </div>
      </div>

      {/* 操作说明区域 */}
      <div>
        {/* 说明标题 */}
        <h2 className="text-lg font-semibold mb-2">操作说明:</h2>
        {/* 说明列表 */}
        <ul className="list-disc list-inside space-y-1 text-sm">
          {/* 操作步骤说明 */}
          <li>输入医生ID，然后点击"添加关注"</li>
          <li>关注后，医生ID会出现在已关注列表中</li>
          <li>点击"取消关注"可以移除关注</li>
          <li>然后去"我的医生"页面查看是否显示</li>
        </ul>
      </div>
    </div>
  );
} 